<template>
    <a-layout class="account-page">
        <a-layout-header>
            <div class="logo">
                <img src="@/assets/login_logo.png" alt="">
            </div>
            <div class="login-title">
                <img src="@/assets/login_title.png" alt="">
            </div>
        </a-layout-header>
        <a-layout-content>
            <div class="info">
                <div class="info-text">
                    <div class="info-title">欢迎登录城市决算数据库！</div>
                    <div class="info-content">北京大学-林肯研究院城市发展与土地政策研究中心成立于2007年，是由北京大学与美国林肯土地政策研究院共同创建的一个非营利性质的教育与学术研究机构，致力于推动中国城市发展和土地政策领域的政策研究和人才培养。</div>
                    <div class="info-tips">
                        建议使用Chrome浏览器 <br>
                        在1920*1080分辨率下使用效果最佳
                    </div>
                </div>
            </div>
            <div class="data-view">
                <router-view></router-view>
            </div>
        </a-layout-content>
        <a-layout-footer>
            北京大学-林肯研究院城市发展与土地政策中心与<a href="http://www.sozdata.com/" target="_blank" rel="noopener noreferrer">北京搜知数据科技有限公司</a>联合开发
        </a-layout-footer>
    </a-layout>
</template>

<style lang="scss">
.account-page {
    height:100%;
    .ant-layout-header {
        height:170px;
        background: #2c3032;
        .logo {
            width:276px;
            height:106px;
            float:left;
            margin-left:54px;
            margin-top:32px;
            img {
                width:100%;
                height:100%;
            }
        }
        .login-title {
            width:316px;
            height:40px;
            float:left;
            margin-left:60px;
            margin-top:60px;
            img {
                width:100%;
                height:100%;
            }
        }
    }
    .ant-layout-content {
        background:url(~@/assets/login_bg.png) center;
        background-size: cover;
        position: relative;
        min-height: 717px;
        .info {
            width:1199px;
            height:395px;
            background: url(~@/assets/login_middle_bg.png) center;
            position: absolute;
            top:50%;
            left:50%;
            margin:-198px 0 0 -600px;
            .info-text {
                width:600px;
                color:#fff;
                padding-left:60px;
                padding-top:60px;
                .info-title {
                    font-size: 22px;
                    font-weight: bold;
                }
                .info-content {
                    margin:10px 0;
                    font-size: 13px;
                    line-height:24px;
                }
                .info-tips {
                    font-size: 13px;
                    line-height:24px;
                }
            }
        }
        .data-view {
            width:450px;
            position: absolute;
            right:50%;
            top:50%;
            margin-right:-530px;
            transform: translate(0,-50%);
        }
    }
    .ant-layout-footer {
        height:50px;
        background: #202529;
        line-height: 50px;
        text-align: center;
        color:#fff;
        padding:0;
    }

    .ant-input.verifycode {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .ant-btn-lg.get-btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
</style>